import React, {useState} from "react";
import {Layout, Menu, MenuProps} from "antd";
import Header from "@/components/Header";
import {Route, Routes, useLocation, useNavigate} from "react-router-dom";
import Home from "@/pages/Home.tsx";
import AdminList from "@/pages/admin/AdminList.tsx";
import EnterpriseList from "@/pages/enterprise/EnterpriseList.tsx";
import DepartmentList from "@/pages/department/DepartmentList.tsx";
import PositionList from "@/pages/position/PositionList.tsx";
import EmployeeList from "@/pages/employee/EmployeeList.tsx";
import EducationList from "@/pages/education/EducationList.tsx";
import WorkExperienceList from "@/pages/workExperience/WorkExperienceList.tsx";
import SkillCertificateList from "@/pages/skillCertificate/SkillCertificateList.tsx";
import TrainingRecordList from "@/pages/trainingRecord/TrainingRecordList.tsx";
import ContractList from "@/pages/contract/ContractList.tsx";
import AttendanceList from "@/pages/attendance/AttendanceList.tsx";
import SalaryList from "@/pages/salary/SalaryList.tsx";
import ChartList from "@/pages/chart/ChartList.tsx";
import {
  ApartmentOutlined,
  AppstoreOutlined,
  AuditOutlined,
  FileDoneOutlined,
  FileOutlined,
  FileSyncOutlined,
  HomeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  MoneyCollectOutlined,
  PictureOutlined,
  PieChartOutlined,
  ProfileOutlined,
  ReadOutlined,
  SolutionOutlined,
  UserOutlined
} from "@ant-design/icons";
import {useTranslation} from "react-i18next";

const MainLayout: React.FC = () => {

  const {Sider, Content} = Layout;
  const { t } = useTranslation();

  const contentStyle: React.CSSProperties = {
    height: '100%',
    width: '100%',
    padding: '10px 10px',
    overflowY: 'auto'
  };

  const siderStyle: React.CSSProperties = {
    textAlign: 'center',
    lineHeight: '120px'
  };

  const layoutStyle = {
    overflow: 'hidden',
    height: '100vh',
    width: '100vw',
  };

  const [collapsed, setCollapsed] = useState(false);

  const menuItems = [
    { key: 'collapse', label: '收起', icon: collapsed ? React.createElement(MenuUnfoldOutlined) : React.createElement(MenuFoldOutlined) },
    { key: '/Home', label: '主页', path: '/Home', icon: React.createElement(HomeOutlined) },
    { key: '/AdminList', label: '管理员', path: '/AdminList', icon: React.createElement(UserOutlined) },
    { key: '/EnterpriseList', label: '企业信息', path: '/EnterpriseList', icon: React.createElement(AppstoreOutlined) },
    { key: '/DepartmentList', label: '部门信息', path: '/DepartmentList', icon: React.createElement(ApartmentOutlined) },
    { key: '/PositionList', label: '岗位信息', path: '/PositionList', icon: React.createElement(SolutionOutlined) },
    { key: '/EmployeeList', label: '员工基本信息', path: '/EmployeeList', icon: React.createElement(FileOutlined) },
    { key: '/EducationList', label: '教育经历', path: '/EducationList', icon: React.createElement(FileDoneOutlined) },
    { key: '/WorkExperienceList', label: '工作经历', path: '/WorkExperienceList', icon: React.createElement(FileSyncOutlined) },
    { key: '/SkillCertificateList', label: '技能证书', path: '/SkillCertificateList', icon: React.createElement(PictureOutlined) },
    { key: '/TrainingRecordList', label: '培训记录', path: '/TrainingRecordList', icon: React.createElement(ReadOutlined) },
    { key: '/ContractList', label: '劳动合同信息', path: '/ContractList', icon: React.createElement(ProfileOutlined) },
    { key: '/AttendanceList', label: '考勤信息', path: '/AttendanceList', icon: React.createElement(AuditOutlined) },
    { key: '/SalaryList', label: '员工薪资', path: '/SalaryList', icon: React.createElement(MoneyCollectOutlined) },
    { key: '/ChartList', label: '数据统计', path: '/ChartList', icon: React.createElement(PieChartOutlined) },
  ];

  const navigate = useNavigate();

  const location = useLocation();
  const defaultLocation = location.pathname === '/' ? '/Home' : location.pathname;

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === 'collapse') {
      setCollapsed(!collapsed)
      return
    }
    navigate(e.key);
  };

  return (
    <Layout style={layoutStyle}>
      <Header title={t('title')}/>
      <Layout>
        <Sider collapsible collapsed={collapsed} style={siderStyle} theme={"light"} trigger={null}>
          <Menu
            onClick={handleMenuClick}
            defaultSelectedKeys={[defaultLocation]}
            defaultOpenKeys={[defaultLocation]}
            mode="inline"
            items={menuItems}
          />
        </Sider>
        <Content style={contentStyle}>
          <Routes>
            <Route path="/Home" element={<Home/>} />
            <Route path="/AdminList" element={<AdminList/>} />
            <Route path="/EnterpriseList" element={<EnterpriseList/>} />
            <Route path="/DepartmentList" element={<DepartmentList/>} />
            <Route path="/PositionList" element={<PositionList/>} />
            <Route path="/EmployeeList" element={<EmployeeList/>} />
            <Route path="/EducationList" element={<EducationList/>} />
            <Route path="/WorkExperienceList" element={<WorkExperienceList/>} />
            <Route path="/SkillCertificateList" element={<SkillCertificateList/>} />
            <Route path="/TrainingRecordList" element={<TrainingRecordList/>} />
            <Route path="/ContractList" element={<ContractList/>} />
            <Route path="/AttendanceList" element={<AttendanceList/>} />
            <Route path="/SalaryList" element={<SalaryList/>} />
            <Route path="/ChartList" element={<ChartList/>} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  )
}

export default MainLayout;